<template>
  <a-spin :spinning="loading">
    <div class="page-miH page-bgBack" style="height: 100%">
      <PageHeader @back="goBack" subTitle="返回"> 校验结果 </PageHeader>
      <div class="body">
        <div class="headBox">
          <div class="item">
            <div>
              <a-button @click="dateChange(1)" type="link" size="small">
                <a-icon type="caret-left" style="position: relative; bottom: 2px" />
              </a-button>
              <a-button type="link">
                <div style="font-size: 24px; font-weight: 500; color: #3c3d43">
                  {{ moment(dynamicDate).format("YYYY-MM") }}
                </div>
              </a-button>
              <a-button size="small" type="link" @click="dateChange(2)">
                <a-icon type="caret-right" style="position: relative; bottom: 2px" />
              </a-button>
            </div>
          </div>
          <div class="item">
            <div class="itemHeadText">参保人数</div>
            <div class="itemContentText">
              <span class="itemContentTextNum">{{ infoList.length ? infoList[0].empCount : "--" }}</span
              ><span class="itemUnit">人</span>
            </div>
          </div>
          <div class="item">
            <div class="itemHeadText">社保缴费</div>
            <div class="itemContentText">
              <span class="itemContentTextNum">{{ infoList.length ? infoList[0].socAmount : "--" }}</span
              ><span class="itemUnit">元</span>
            </div>
          </div>
          <div class="item">
            <div class="itemHeadText">公积金缴费</div>
            <div class="itemContentText">
              <span class="itemContentTextNum">{{ infoList.length ? infoList[0].pfAmount : "--" }}</span
              ><span class="itemUnit">元</span>
            </div>
          </div>
        </div>
        <a-alert
          style="margin-top: 12px"
          message="仅校验该月份正常缴纳记录，补收补缴记录不做校验、减员记录不做校验"
          type="warning"
          show-icon
        />
        <div class="contentBox" v-if="infoList.length">
          <div>
            <div v-for="(item, index) in dataList" :key="index" style="margin-bottom: 12px">
              <div class="contentItem">
                <div class="contentItemOne">
                  <div style="display: flex; align-items: center">
                    <xq-icon type="icon-jilu" class="jilu"></xq-icon>
                    <div style="font-size: 18px; color: #222426; font-weight: 500; margin-left: 6px">
                      {{ moment(item.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                    <div v-if="state !== '2'" style="font-size: 14px; font-weight: 400; color: #55565d; margin-left: 45px">校验文件：</div>
                    <div v-if="state !== '2'">{{ item.fileName ? item.fileName : "--" }}</div>
                    <a-button v-if="state !== '2'" type="link" :disabled="!item.fileName" @click="downLoad(item.fileUrl)">下载</a-button>
                  </div>
                  <div style="display: flex">
                    <div class="number">
                      <span class="numberTitle">参保人数差：</span><span class="numberContent">{{ item.empDifferenceNum }}</span
                      >人
                    </div>
                    <div class="number" style="margin-left: 160px">
                      <span class="numberTitle">社保缴费差：</span><span class="numberContent">{{ item.socDifferenceAmount }}</span
                      >元
                    </div>
                    <div class="number" style="margin-left: 160px">
                      <span class="numberTitle">公积金缴费差：</span><span class="numberContent">{{ item.pfDifferenceAmount }}</span
                      >元
                    </div>
                  </div>
                </div>
                <div class="contentItemTwo">
                  {{ !item.isContentShow ? "展开" : "收起" }}
                  <a-button @click="switchChange(item, index)" style="font-size: 22px; margin-left: 4px" type="link"
                    ><a-icon v-if="!item.isContentShow" type="right-circle" />
                    <a-icon v-else type="down-circle" />
                  </a-button>
                </div>
              </div>
              <div v-if="item.isContentShow" class="itemTable">
                <div class="itemTableTitle">
                  <div class="shuxian" />
                  异常数据表
                </div>
                <div class="buttonBox">
                  <div>
                    <a-select style="width: 180px" v-model="selectItem" @change="handleSelectChange(item, index)" placeholder="全部状态">
                      <a-select-option v-for="(item, index) in tableList" :key="index" :value="item.key">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </div>
                  <div>
                    <!-- <a-button style="margin-right:18px">同步表数据</a-button> -->
                    <a-button type="primary" @click="exportFile(item)">下载异常数据</a-button>
                  </div>
                </div>
                <div style="margin-top: 24px">
                  <a-table :columns="columns" :data-source="item.socCheckItemList" :pagination="false" :scroll="{ x: 1500 }">
                    <template slot="sysPersonalSocAmount" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelPersonalSocAmount }}</span>
                    </template>
                    <template slot="sysCompanySocAmount" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelCompanySocAmount }}</span></template
                    >
                    <template slot="sysPersonalPfAmount" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelPersonalPfAmount }}</span></template
                    >
                    <template slot="sysCompanyPfAmount" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelCompanyPfAmount }}</span></template
                    >
                    <template slot="sysServiceCost" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelServiceCost }}</span></template
                    >
                    <template slot="sysSocialSecurityFine" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelSocialSecurityFine }}</span></template
                    >
                    <template slot="sysAccumulationFundFine" slot-scope="text, record">
                      <span>{{ text + "/" }}</span>
                      <span class="recordStyle">{{ record.excelAccumulationFundFine }}</span></template
                    >
                    <template slot="payCostType" slot-scope="text">{{
                      ["正常应缴", "调整计划", "补收/补缴", "个人退收"][text - 1]
                    }}</template>
                    <template slot="wrongsStatus" slot-scope="text">{{
                      [
                        "系统内无此人",
                        "文件内无此人",
                        "未参保",
                        "社保金异常",
                        "公积金异常",
                        "社保局无此人",
                        "医保局无此人",
                        "公积金无此人",
                        "服务费异常",
                        "滞纳金异常"
                      ][text - 1]
                    }}</template>
                    <template slot="action" slot-scope="text, record">
                      <a-button v-if="record.wrongsStatus === 1" type="link" @click="goActionDetail(1)">添加员工</a-button>
                      <a-button v-if="record.wrongsStatus === 2" type="link" @click="goActionDetail(2)">减员</a-button>
                      <a-button v-if="record.wrongsStatus === 3" type="link" @click="goActionDetail(2)">增员</a-button>
                      <a-button v-if="record.wrongsStatus === 4" type="link">同步为文件数据</a-button>
                      <a-button v-if="record.wrongsStatus === 5" type="link">同步为文件数据</a-button>
                    </template>
                  </a-table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else style="margin-top: 80px">
          <a-empty />
        </div>
        <div style="display: flex; justify-content: flex-end; margin-top: 24px">
          <a-pagination :current="current" :total="total" @change="onChange" />
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script>
import moment from "moment";
import { pageByMonthIdAndCheckType, getGinseng } from "./api";
import axios from "axios";
import qs from "qs";
const columns = [
  { title: "姓名", width: 120, dataIndex: "empName", key: "empName", fixed: "left" },
  { title: "身份证号", dataIndex: "idCard", key: "idCard", width: 200 },
  {
    title: "缴费类型",
    dataIndex: "payCostType",
    key: "payCostType",
    width: 120,
    scopedSlots: { customRender: "payCostType" }
  },
  { title: "参保方案", dataIndex: "socProgName", key: "socProgName", width: 120 },
  { title: "参保城市", dataIndex: "socProgCity", key: "socProgCity", width: 120 },
  {
    title: "个人社保费",
    dataIndex: "sysPersonalSocAmount",
    key: "sysPersonalSocAmount",
    width: 120,
    scopedSlots: { customRender: "sysPersonalSocAmount" }
  },
  {
    title: "单位社保费",
    dataIndex: "sysCompanySocAmount",
    key: "sysCompanySocAmount",
    width: 120,
    scopedSlots: { customRender: "sysCompanySocAmount" }
  },
  {
    title: "个人公积金费",
    dataIndex: "sysPersonalPfAmount",
    key: "sysPersonalPfAmount",
    width: 120,
    scopedSlots: { customRender: "sysPersonalPfAmount" }
  },
  {
    title: "单位公积金费",
    dataIndex: "sysCompanyPfAmount",
    key: "sysCompanyPfAmount",
    width: 120,
    scopedSlots: { customRender: "sysCompanyPfAmount" }
  },
  {
    title: "服务费",
    dataIndex: "sysServiceCost",
    key: "sysServiceCost",
    width: 120,
    scopedSlots: { customRender: "sysServiceCost" }
  },
  // {
  //   title: "补收滞纳金",
  //   dataIndex: "sysSocialSecurityFine",
  //   key: "sysSocialSecurityFine",
  //   width: 120,
  //   scopedSlots: { customRender: "sysSocialSecurityFine" }
  // },
  // {
  //   title: "补缴滞纳金",
  //   dataIndex: "sysAccumulationFundFine",
  //   key: "sysAccumulationFundFine",
  //   width: 120,
  //   scopedSlots: { customRender: "sysAccumulationFundFine" }
  // },
  {
    title: "状态",
    dataIndex: "wrongsStatus",
    key: "wrongsStatus",
    width: 120,
    scopedSlots: { customRender: "wrongsStatus" }
  }
  // {
  //   title: "操作",
  //   key: "action",
  //   fixed: "right",
  //   width: 150,
  //   scopedSlots: { customRender: "action" },
  //   align: "center"
  // }
];
export default {
  data() {
    return {
      selectItem: undefined,
      tableList: [
        { key: "0", name: "全部状态" },
        { key: "1", name: "系统内无此人" },
        { key: "2", name: "文件内无此人" },
        // { key: "3", name: "文件数据缺失" },
        { key: "3", name: "未参保" },
        { key: "4", name: "社保金异常" },
        { key: "5", name: "公积金异常" },
        { key: "9", name: "服务费异常" }
      ],
      current: 1,
      total: 0,
      columns,
      loading: false,
      dataList: [],
      infoList: [],
      errDataList: [],
      isContentShow: false,
      companyId: this.$store.state.hr.companyId,
      dataListCopy: [],
      url: "",
      params2: {},
      state: null,
      dynamicDate: moment(moment().format("YYYY-MM"), "YYYY-MM"),
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null
      }
    };
  },
  created() {
    this.dynamicDate = moment(this.$route.query.year + "-" + this.$route.query.month, "YYYY-MM");
    this.state = this.$route.query.state;
    if (this.state === "1") {
      this.tableList = [
        { key: "0", name: "全部状态" },
        { key: "1", name: "系统内无此人" },
        { key: "2", name: "文件内无此人" },
        // { key: "3", name: "文件数据缺失" },
        { key: "3", name: "未参保" },
        { key: "4", name: "社保金异常" },
        { key: "5", name: "公积金异常" },
        { key: "9", name: "服务费异常" }
      ];
    } else if (this.state === "2") {
      this.tableList = [
        { key: "0", name: "全部状态" },
        { key: "1", name: "系统内无此人" },
        // { key: "2", name: "文件内无此人" },
        // { key: "3", name: "文件数据缺失" },
        { key: "3", name: "未参保" },
        { key: "4", name: "社保金异常" },
        { key: "5", name: "公积金异常" },
        { key: "6", name: "社保局无此人" },
        { key: "7", name: "医保局无此人" },
        { key: "8", name: "公积金无此人" }
        // { key: "9", name: "服务费异常" }
      ];
    }
    this.getGinsengList();
  },
  methods: {
    exportFile(e) {
      // console.log(e);
      this.params2 = {
        socCheckId: e.id
      };
      if (this.selectItem) {
        this.params2.wrongsStatus = this.selectItem;
      }
      this.url = `/hr/api/v1/socCheckItems/export`;
      this.excelName = `异常数据.xlsx`;
      this.getDownload();
    },
    getDownload() {
      axios({
        url: this.url,
        params: this.params2,
        paramsSerializer: (param) => {
          return qs.stringify(param, { indices: false });
        },
        method: "get",
        responseType: "blob"
        // headers: {
        //   token: this.token
        // }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", this.excelName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    goActionDetail(e) {
      if (e === 1) {
        this.$router.push("/staff/employee");
      } else if (e === 2) {
        this.$router.push("/shebao/shebaoManage/shebaoZengJianY");
      }
    },
    downLoad(e) {
      const url = e;
      window.open(url + `?token=${this.$store.state.auth.token}`);
    },
    getGinsengList() {
      console.log(this.state, " this.state");
      getGinseng({
        companyId: this.companyId,
        checkType: this.state === "1" ? 1 : 2,
        month: moment(this.dynamicDate).format("MM"),
        year: moment(this.dynamicDate).format("YYYY")
      }).then((res) => {
        this.infoList = JSON.parse(JSON.stringify(res.data));
        if (this.infoList.length > 0) {
          this.getpageByMonthIdAndCheckType();
        }
      });
    },
    getpageByMonthIdAndCheckType() {
      this.loading = true;
      pageByMonthIdAndCheckType({
        pageSize: 10,
        pageNo: this.current,
        monthId: this.infoList[0].id,
        checkType: this.state === "1" ? 1 : 2
      })
        .then((res) => {
          this.loading = false;
          this.dataList = JSON.parse(JSON.stringify(res.data.entities));
          this.dataListCopy = JSON.parse(JSON.stringify(res.data.entities));
          this.total = res.data.entityCount;
          this.dataList.forEach((item, index) => {
            item.isContentShow = false;
          });
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },

    onChange(current, pageSize) {
      this.current = current;
      this.getGinsengList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      // this.getRecordInfosList();
    },
    handleSelectChange(item, index) {
      this.dataList[index].socCheckItemList = [];
      this.dataListCopy[index].socCheckItemList.forEach((item2, index2) => {
        if (this.selectItem === "0") {
          this.dataList[index].socCheckItemList = JSON.parse(JSON.stringify(this.dataListCopy[index].socCheckItemList));
        } else if (item2.wrongsStatus === parseInt(this.selectItem)) {
          this.dataList[index].socCheckItemList.push(item2);
        }
      });
    },
    switchChange(item, index) {
      this.$set(this.dataList, index, {
        ...this.dataList[index],
        isContentShow: !item.isContentShow
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    goBackDate() {
      // this.dynamicDate = moment(moment().format("YYYY-MM"), "YYYY-MM");
      this.dynamicDate = moment(this.$route.query.year + "-" + this.$route.query.month, "YYYY-MM");
      this.getGinsengList();
    },
    dateChange(e) {
      if (e === 1) {
        this.dynamicDate = moment(this.dynamicDate).subtract(1, "months");
        this.getGinsengList();
      }
      if (e === 2) {
        this.dynamicDate = moment(this.dynamicDate).subtract(-1, "months");
        this.getGinsengList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.recordStyle {
  color: red;
}
.body {
  padding: 24px;
}
.itemTable {
  padding: 24px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  border-top: none;
}
.buttonBox {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.itemTableTitle {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .shuxian {
    width: 4px;
    height: 16px;
    background: var(--primary);
    margin-right: 6px;
  }
}
.jilu {
  font-size: 20px;
  color: var(--primary);
}
.number {
  font-size: 14px;
  font-weight: 500;
  color: #3c3d43;
  margin-left: 24px;
}
.numberTitle {
  font-size: 14px;
  font-weight: 400;
  color: #767885;
}
.numberContent {
  color: #55565d;
  font-size: 22px;
  font-weight: 500;
}
.contentBox {
  margin-top: 24px;
}
.contentItem {
  padding: 24px;
  padding-right: 36px;
  width: 100%;
  height: 114px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-around;
  .contentItemOne {
    width: 80%;
  }
  .contentItemTwo {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    align-items: center;
    color: var(--primary);
  }
}
.itemContentTextNum {
  color: #55565d;
}
.headBox {
  width: 100%;
  height: 100px;
  background: #fafafa;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  .item {
    width: 25%;
    padding-left: 5%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .itemHeadText {
      font-size: 14px;
      color: #767885;
    }
    .itemContentText {
      font-size: 24px;
      font-weight: bold;
      color: #55565d;
      margin-top: 6px;
    }
    .itemUnit {
      font-size: 14px;
      font-weight: bold;
      color: #55565d;
      margin-bottom: 8px;
      margin-left: 4px;
      position: relative;
      bottom: 2px;
    }
  }
}
</style>
